<template>
<div>
  <div v-if="$labProcess.info.activityState === 'runing'"
       style="padding-right: 6px;width: 100%;height: 40px;display: flex;justify-content: flex-start;flex-flow: row nowrap;align-items: center">
    <el-select v-model="acceptInfo.viewId" style="width: 100%;margin-right: 8px;flex: auto"
               @change="templateChange"
               clearable filterable remote :remote-method="loadTemplates" placeholder="选择接受模板">
      <el-option v-for="option in templates" :key="option.viewId" :value="option.viewId" :label="option.viewName" />
    </el-select>
    <el-input v-model="acceptInfo.recordName" placeholder="接受记录名称" style="width: 150px;margin-right: 8px;flex: none"></el-input>
    <el-button size="mini" type="primary" icon="el-icon-wallet" style="flex: none" :loading="acceptIng" @click="acceptItem">接受</el-button>
    <el-button size="mini" icon="el-icon-close" type="warning" style="flex: none" :loading="acceptIng" @click="backItem">退回</el-button>
  </div>
  <el-empty v-if="dataSource.length === 0" description="没有可接受的项目" :style="{height: autoHeight }">
  </el-empty>
  <el-table v-else ref="tabelRef" v-loading="loading" :data="dataSource" @row-click="handleRowClick" border stripe :height="autoHeight"
            @selection-change="selectAll" @select="selectSingle" @select-all="selectAll">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" align="center">
      <template slot="header" slot-scope="scope">
        <div>{{ scope.column.label }}</div>
        <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
      </template>
    </el-table-column>
  </el-table>
  <div class="lab-table-page">
    <div style="display: inline-flex">
      <el-pagination
          :disabled="loading"
          :current-page="pageInfo.page"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <el-button-group style="padding: 2px 5px">
        <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
      </el-button-group>
    </div>
  </div>
</div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";

export default {
  name: "LimsRecordAcceptTable",
  mixins: [IdeaTable],
  inject: {
    /**
     * 流程方法注入
     */
    $labProcess: {
      from: '$labProcess',
      default: function () {
        return undefined
      }
    },
    $LabWeb: {
      from: '$LabWeb',
      default: function () {
        return undefined
      }
    }
  },
  data() {
    return {
      columns: [],
      templates: [],
      config: {},
      acceptIng: false,
      acceptInfo: { viewId: '' }
    }
  },
  created() {
    this.init()
  },
  computed: {
    autoHeight() {
      return this.$labProcess.info.activityState === 'runing' ? `calc(100vh - 170px)` : `calc(100vh - 130px)`
    }
  },
  methods: {
    init() {
      const { activityType, process, keys } = this.$labProcess.info
      const { subPrimary, subModel, subLabel } = process
      this.pageInfo.callCmd = subModel
      this.rowKey = subPrimary
      this.queryUrl = '/model/queryData'
      this.columns.push({ prop: subLabel, label: '业务名称' })
      this.addFilter({ field: subPrimary, op: 'in', value: keys })
      this.tableRef = 'tabelRef'
      // 扩展设置
      this.config = this.appInfo.envs[activityType] || {}
      if (this.config && this.config.accept) {
        const { columns, filters, pageSize } = this.config.accept
        if (columns) {
          columns.forEach(item => {
            const index = this.columns.findIndex(e => e.prop === item.prop)
            if (index === -1) {
              this.columns.push(item)
            }
          })
        }
        if (filters) {
          filters.forEach(item => {
            this.addFilter(item)
          })
        }
        this.pageInfo.pageSize = pageSize || 20
      }
      this.loadSource()
      this.loadTemplates()
    },
    loadTemplates(searchVal) {
      let recordLabel = 'record'
      if (this.config.accept && this.config.accept.recordLabel) {
        recordLabel = this.config.accept.recordLabel
      }
      this.templates.splice(0, this.templates.length)
      if (recordLabel) {
        const body = {
          page: 1, pageSize: 100, filters: [
            { field: 'viewLabel', op: '=', value: recordLabel }
          ]
        }
        if (!this.$Util.isEmpty(searchVal)) {
          body.filters.push({ field: 'viewName', op: 'like', value: searchVal })
        }
        this.$post('/view/queryPage?appId=' + this.appInfo.appId, body).then(res => {
          const { records } = res.data
          if (records) {
            records.forEach(item => {
              this.templates.push(item)
            })
          }
        })
      }
    },
    templateChange(viewId) {
      if (!viewId) {
        return
      }
      const selectView = this.templates.find(item => item.viewId === viewId)
      if (selectView) {
        this.$set(this.acceptInfo, 'recordName', selectView.viewName)
      }
    },
    acceptItem() {
      if (!this.config.accept) {
        this.$resultMsg(this, { msg: '未配置接受函数 accept.callBind'})
        return
      }
      const { callBind } = this.config.accept
      if (this.selectRowIds.length === 0) {
        this.$resultMsg(this, { msg: '请选择接受项目'})
        return
      }
      if (!this.acceptInfo.viewId) {
        this.$resultMsg(this, { msg: '请选择接受模板'})
        return
      }
      this.acceptIng = true
      this.acceptInfo.subValues = this.$labProcess.info.keys
      this.callMethod(callBind, this.acceptInfo)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              this.loadSource()
              this.$emit('bind')
            }
            this.acceptIng = false
          })
    },
    backItem() {
      if (this.selectRowIds.length === 0) {
        this.$resultMsg(this, { msg: '请选择要退回的项目'})
        return
      }
      const info = this.$labProcess.info
      info.subValues = this.selectRowIds
      this.acceptIng = true
      this.$labProcess.back()
          .then(res => {
            this.$resultMsg(this, res)
            this.$LabWeb.refreshTag(this.$route.path)
            this.acceptIng = false
          })
    }
  }
}
</script>

<style scoped>

</style>
